<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{
            width: 600px;
            height: 600px;
            margin: 50px auto;
        }
        ul li{
            list-style: none;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            box-sizing: border-box;
            float: left;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
            color: white;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>

    <script>
        var oLi = document.querySelectorAll("li");
        for(var i=0; i<oLi.length; i++){
            oLi[i].onclick = function(){
                for(var j=0; j<oLi.length; j++){
                    oLi[j].style.color="";
                }
                this.style.color = "red";
            }
        }
        
    </script>
</body>
</html>